<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS示范</title>
    <style>
        /* 标签选择器 */
        h1 {
            color : blue;
        }
        h2 {
            color : pink;
        }
        div {
            color : red;
        }
        span {
            color : green;
        }
        /* id选择器 */
        #divid {
            font-size: 18px;
        }
        #spanid {
            font-size: 28px;
        }
        /* 类选择器 */
         .spanclass {
            border : 2px solid orange;
        }
        .divclass {
            margin : 10px;
            padding : 20px;
            width : 300px;
            height: 500px;
        } 

    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>

    <div>
        <span class = "spanclass">
            一个span
        </span><br/>
        <a href="#">空链接</a>

    </div>

    <div id = "divid">
        <span class = "spanclass">
            另一个span
        </span><br/>
        <span id = "spanid">
            再一个span
        </span><br/>

        <ul id = "ul">
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>

        <ol class = "ol">
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ol>
    </div>

    <div class = "divclass">
        <h1 class = "hclass">第二个一级标题</h1>
        <h2 class = "hclass">第二个二级标题</h2>
    </div>

    <a href="#">另一个空链接</a><br/>

    <span>
            还有一个span
    </span>

</body>
</html>